<template>
  <div class="login">
    <div class="login_img">
      <img src="../assets/images/pic1.jpg" />
    </div>
    <div class="login_inp">
      <div class="login_type">
        <span class="login_psd">
          <a href="#" :class="forpsd" @click="changePsd">密码登录</a>
        </span>
        <span class="login_check">
          <a href="#" :class="forcode" @click="changeCode">验证码登录</a>
        </span>
      </div>
      <div v-show="showText">
        <div class="login_text">
          <input
            spellcheck="false"
            type="text"
            placeholder="账号"
            v-model="info.account"
          /><br />
          <input
            spellcheck="false"
            :type="psdType"
            placeholder="密码"
            v-model="info.psd"
            maxlength="16"
            minlength="6"
          />
          <i
            v-show="showGuan"
            @click="open"
            class="iconfont icon-yanjing-guan"
          ></i>
          <i
            v-show="!showGuan"
            @click="close"
            class="iconfont icon-yanjing-kai"
          ></i>
        </div>
        <div class="forget"><router-link to="reset">忘记密码</router-link></div>
        <div class="login_btn">
          <label
            ><w-button type="success" class="login_" @click="handleLogin"
              >登 录</w-button
            ></label
          >
        </div>
      </div>
      <div class="login_code" v-show="!showText">
        <input
          spellcheck="false"
          type="text"
          placeholder="手机号"
          v-model="info.phone"
        /><br />
        <input
          spellcheck="false"
          type="text"
          placeholder="验证码"
          v-model="info.code"
        />
        <button href="#" class="code" :disabled="isDisabled" @click="countDown">
          {{ content }}
        </button>
        <div class="login_btn">
          <label
            ><w-button type="success" class="login_" @click="codeLogin"
              >登 录</w-button
            ></label
          >
        </div>
      </div>
      <div class="register">
        <p>没有账号？</p>
        <router-link to="register">立即注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      info: {
        account: "",
        phone: "",
        psd: "",
        code: "",
      },
      psdType: "password",
      showGuan: true,
      showText: true,
      forpsd: "current",
      forcode: "",
      content: "获取验证码",
      time: 60,
      isDisabled: false,
    };
  },
  methods: {
    open() {
      this.showGuan = false;
      this.psdType = "text";
    },
    close() {
      this.showGuan = true;
      this.psdType = "password";
    },
    changePsd() {
      this.showText = true;
      this.forpsd = "current";
      this.forcode = "";
    },
    changeCode() {
      this.showText = false;
      this.forpsd = "";
      this.forcode = "current";
    },
    countDown() {
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/service/sms/" + this.info.phone,
      }).then((response) => {
        console.log(response);
        let code = response.data.code;
        if (code === 204) {
          this.$alert("重复请求", "提示", {
            confirmButtonText: "确定",
          });
        }
      });
      if (this.info.phone != "") {
        this.content = this.time + "s后重新发送";
        let timer = window.setInterval(() => {
          this.time--;
          this.content = this.time + "s后重新发送";
          this.isDisabled = true;
          if (this.time < 0) {
            //当倒计时小于0时清除定时器
            window.clearInterval(timer);
            this.isDisabled = true;
            this.content = "重新获取验证码";
            this.time = 60;
          }
        }, 1000);
      } else {
        this.$alert("手机号为空", "提示", {
          confirmButtonText: "确定",
        });
      }
    },
    handleLogin() {
      this.$axios({
        method: "POST",
        url: "http://1.15.170.222:88/api/user/loginWithPassword",
        data: {
          field: this.info.account,
          password: this.info.psd,
        },
      }).then((response) => {
        console.log(response);
        let code = response.data.code;

        if (code === 201) {
          this.$alert("用户不存在或密码不正确", "提示", {
            confirmButtonText: "确定",
          });
        } else {
          let role = response.data.data.role;
          let uid = response.data.data.uid;
          let username = response.data.data.username
          let phone = response.data.data.phone
          localStorage.setItem("uid", uid);
          localStorage.setItem('username',username)
          localStorage.setItem('phone',phone)
          if (role === 0) {
            this.$router.push({
              path: "/userIndex",
            });
          } else {
            this.$router.push({
              path: "/managerIndex",
            });
          }
        }
      });
    },
    codeLogin() {
      this.$axios({
        method: "POST",
        url: "http://1.15.170.222:88/api/user/loginWithCode",
        data: {
          phone: this.info.phone,
          code: this.info.code,
        },
      }).then((response) => {
        console.log(response);
        let code = response.data.code;
        if (code === 201) {
          this.$alert("用户不存在", "提示", {
            confirmButtonText: "确定",
          });
        } else if (code === 203) {
          this.$alert("验证码错误", "提示", {
            confirmButtonText: "确定",
          });
        } else {
          let role = response.data.data.role;
          let uid = response.data.data.uid;
          localStorage.setItem("uid", uid);
          this.$alert("登录成功", "提示", {
            confirmButtonText: "确定",
          });
          if (role === 0) {
            this.$router.push({
              path: "/userIndex",
            });
          } else {
            this.$router.push({
              path: "/managerIndex",
            });
          }
        }
      });
    },
  },
  created() {
    let that = this;
    document.onkeydown = function (e) {
      e = window.event || e;
      //首先得是enter键
      if (e.code === "Enter" || e.code === "enter") {
        //其次得是登录页面
        if (that.$route.path === "/login"|| that.$route.path === "/") {
          //进一步判断哪种方式
          if (that.forpsd === "current") {
            that.handleLogin();
          }
          if (that.forcode === "current") {
            that.codeLogin();
          }
        }
      }
    };
  },
};
</script>

<style>
a {
  text-decoration: none;
  color: #333;
}
.login {
  display: flex;
  width: 750px;
  height: 450px;
  margin: 130px auto;
  border: 1px solid #d3d7d4;
}
.login_img {
  flex: 2;
  border-right: 1px solid #d3d7d4;
}
.login_img img {
  width: 100%;
  height: 100%;
}
.login_inp {
  flex: 3;
}
.login_type {
  width: 210px;
  height: 30px;
  margin: 70px auto;
  margin-bottom: 30px;
}
.login_psd {
  margin-right: 30px;
}
.login_psd,
.login_check {
  display: inline-block;
  width: 90px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.login_text input,
.login_code input {
  width: 330px;
  height: 40px;
  margin-left: 50px;
  margin-top: 40px;
  border: none;
  border-bottom: 1px solid #d3d7d4;
  outline: none;
  font-size: 15px;
}
.icon-yanjing-guan {
  margin-left: -20px;
}
.icon-yanjing-kai {
  margin-left: -20px;
}
.code {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #00bfff;
  border-radius: 30px;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 10px;
  margin-left: -88px;
}
.forget {
  margin-top: 15px;
  margin-left: 310px;
  width: 80px;
  text-align: center;
}
.forget a {
  font-size: 10px;
}
.login_btn {
  margin: 20px auto;
  margin-bottom: 10px;
  width: 300px;
  height: 40px;
  border-radius: 30px;
  cursor: pointer;
  background-color: #00bfff;
}
.login_btn .login_ {
  color: #fff;
  text-align: center;
  line-height: 0;
  height: 100%;
  width: 100%;
  background: none;
  border: none;
}
.register {
  width: 100%;
  text-align: center;
}
.register p {
  display: inline-block;
  font-size: 12px;
}
.register a {
  display: inline-block;
  font-size: 12px;
  color: #00bfff;
}
.current {
  border-bottom: 2px solid #00bfff;
}
</style>
